<template>
    <div class="exam-paper-view-wrap">
        <h3 class="text-center">{{ name }}</h3>
        <div class="question-view-wrap" v-loading="loading">
            <div class="question-view-item" v-for="(info, i) in questionDetailList" :key="i">
                <el-row type="flex" :gutter="20" class="type-item-wrap">
                    <el-col :span="24">
                        <p class="type-title">{{ (i+1) + '、'}}<el-tag >{{ mapQuestionType(info.questionType) }}</el-tag></p>
                    </el-col>
                </el-row>
                <el-row type="flex" :gutter="20" class="type-item-wrap">
                    <!-- <el-col :span="3">
                        <p class="type-title text-right">【题干】</p>
                    </el-col> -->
                    <el-col :span="21" :offset="1">
                        <div>
                            <p class="question-content">{{ info.content }}</p>
                            <!-- 题干图片 -->
                            <div v-if="info.contentPics" class="question-pic">
                                <img v-for="(item,i) in info.contentPics.split(',')"  :key="i" :src="item||defaultImg" width="100" height="100" @click="$imgPreview" :data-imgpreview="info.contentPics" :data-imgpreviewindex="i"/>
                            </div>
                            <!-- 题干视频 -->
                            <div v-if="info.video" class="question-video">
                                <video :src="info.video" controls="controls" height="200" width="300"></video>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row type="flex" :gutter="20" class="type-item-wrap">
                    <!-- <el-col :span="3">
                        <p class="type-title text-right">【选项】</p>
                    </el-col> -->
                    <el-col :span="21" :offset="1">
                        <el-row class="question-option-list" v-for="(item, index) in info.optionList" :key="index">
                            <el-col :span="1">
                                <el-checkbox v-if="info.questionType==3" v-model="item.isAnswer" :label="1" :true-label="1" :false-label="0" disabled>{{''}}</el-checkbox>
                                <el-radio v-else v-model="item.isAnswer" :label="1" disabled>{{''}}</el-radio>
                            </el-col>
                            <el-col :span="23">
                                <p v-if="info.questionType==1">{{ item.optionContent }}</p>
                                <p v-else>{{ item.optionMark + '、' + item.optionContent }}</p>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row type="flex" :gutter="20" class="type-item-wrap">
                    <el-col :span="3">
                        <p class="type-title text-right">正确答案：</p>
                    </el-col>
                    <el-col :span="21">
                        <el-row>
                            <el-col :span="24">
                                <p>{{ info.answer }}</p>
                                <!-- <template v-for="(item, index) in info.optionList" >
                                    <template v-if="info.questionType == 1">
                                        <p v-if="item.isAnswer == 1" :key="index">{{ item.optionContent }}</p>
                                    </template>
                                    <template v-else-if="info.questionType == 2" >
                                        <p v-if="item.isAnswer == 1" :key="index">{{ item.optionMark }}</p>
                                    </template>
                                    <template v-else >
                                        <span v-if="item.isAnswer == 1" :key="index">{{ item.optionMark + calcIsLastAnswer(index, info.optionList) }}</span>
                                    </template>
                                </template> -->
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row type="flex" :gutter="20" class="type-item-wrap">
                    <el-col :span="3">
                        <p class="type-title text-right">解&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;析：</p>
                    </el-col>
                    <el-col :span="21">
                        <div v-if="info.analysisContent || info.analysisPics">
                            <p class="analysis-content">{{ info.analysisContent }}</p>
                            <!-- 解析图片 -->
                            <div v-if="info.analysisPics" class="analysis-pic">
                                <img v-for="(item,i) in info.analysisPics.split(',')"  :key="i" :src="item||defaultImg" width="100" height="100" @click="$imgPreview" :data-imgpreview="info.analysisPics" :data-imgpreviewindex="i"/>
                            </div>
                        </div>
                        <p v-else>无</p>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>
<script>
import { getPaperDetailInfo } from '@/api/exam'
export default {
    name: 'ExamPaperView',
    props: {
        closeFun: {
            type: Function,
            required: true
        },
        oldInfo: {
            type: Object,
            default () {
                return {}
            }
        }
    },
    data() {
        return {
            loading: true,
            name: this.oldInfo.name, // 试卷名称
            questionDetailList: []
        }
    },
    created() {
        if(this.oldInfo && this.oldInfo.id) {
            
            getPaperDetailInfo({
                id: this.oldInfo.id
            }).then(res => {
                if(res.status === 200) {
                    let list = res.data
                    // 每题添加正确答案属性
                    list.forEach(item => {
                        item.answer = this.calcAnswer(item)
                    })
                    this.questionDetailList = list

                    this.$nextTick(() => {
                        this.loading = false
                    })
                }
            })
            
        }
    },
    methods: {
        mapQuestionType(key) {
            let MapList = {
                1: '判断题',
                2: '单选题',
                3: '多选题'
            }

            return MapList[key]
        },
        // 计算正确答案
        calcAnswer(obj) {
            let isLast = true
            let answer = []

            for(let i=0, len=obj.optionList.length; i < len; i++) {
                if(obj.optionList[i].isAnswer == 1) {
                    if(obj.questionType == 1) {
                        answer.push(obj.optionList[i].optionContent)
                    } else {
                        answer.push(obj.optionList[i].optionMark)
                    }
                }
            }

            return answer.join('、')
        }
    }
}
</script>
<style lang="scss" scoped>
.exam-paper-view-wrap {
    h3 {
        margin-top: 10px;
        font-size: 26px;
    }
    .question-view-item {
        margin-top: 10px;
        line-height: 40px;
        border-bottom: 1px dashed #DCDFE6;
        .question-pic {
            display: flex;
            img {
                margin-right: 20px;
            }
        }
    }
}
</style>